<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet">
    <script src="../vue.min.js"></script>
</head>
<body>
    
    <div class="container" id="mainContent">
        <div class="panel panel-default">
            <div class="panel panel-default">
                  <div class="panel-heading">
                        <h3 class="panel-title">Simple Deom</h3>
                  </div>
                  <div class="panel-body">
                        <div class="row">
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label for="">trim 输入值（去除空格）</label>
                                    <input type="text" class="form-control" v-model.trim="trimData" placeholder="Input field">
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label for="">trim 输出值</label>
                                    <div class="form-control">{{ trimData }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label for="">number 输入值（转换成Number）</label>
                                    <input type="text" class="form-control" v-model.number="numberData" placeholder="Input field">
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label for="">number 输出值</label>
                                    <div class="form-control">{{ numberData }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label for="">lazy 输入值（失去焦点时才发生变化）</label>
                                    <input type="text" class="form-control" v-model.lazy="lazyData" placeholder="Input field">
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label for="">lazy 输出值</label>
                                    <div class="form-control">{{ lazyData }}</div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label for="">v-text（不渲染标签）</label>
                                    <input type="text" class="form-control" v-model="textData" placeholder="Input field">
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label for="">v-text 输出值(模板输出)</label>
                                    <div class="form-control">{{ textData }}</div>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label for="">v-text 输出值(指令输出)</label>
                                    <div class="form-control" v-text="textData"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label for="">v-html</label>
                                    <input type="text" class="form-control" v-model="htmlData" placeholder="Input field">
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label for="">v-html 输出值(模板输出)</label>
                                    <div class="form-control">{{ htmlData }}</div>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label for="">v-html 输出值(指令输出)</label>
                                    <div class="form-control" v-html="htmlData"></div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label for="">v-show(当输入框没有值的时候，不显示，通过display控制)</label>
                                    <input type="text" class="form-control" v-model="showData" placeholder="Input field">
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label for="">v-show 输出值(指令输出)</label>
                                    <div class="form-control" v-show="showData">{{showData}}</div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label for="">v-if(进行简单判断)</label>
                                    <input type="text" class="form-control" v-model="ifData" placeholder="Input field">
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label for="">v-if 输出值(指令输出)</label>
                                    <div v-if="ifData < 30" class="alert alert-success">小于30</div>
                                    <div v-else-if="ifData < 70" class="alert alert-warning">大于30小于70</div>
                                    <div v-else class="alert alert-danger">大于70</div>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label for="">v-bind(可以简写：)</label>
                                    <input type="text" class="form-control" v-model="bindData" placeholder="Input field">
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label for="">v-bind 输出值(指令输出)</label>
                                    <div class="form-control" v-bind:prop="bindData">{{bindData}}</div>
                                </div>
                            </div>
                            <div class="col-xs-4">
                                <div class="form-group">
                                    <label for="">v-bind 输出值(指令输出)</label>
                                    <div :class = "{'label': false, 'label-info': false, 'form-control': true}">
                                        <span :class="{'label': true, 'label-info': bindData < 30, 'label-warning': bindData <= 70 && bindData >= 30,  'label-danger': bindData > 70}">zhi</span>
                                        <span :class="['label', bindData < 30 ? 'label-info' : bindData > 70 ? 'label-danger' : 'label-warning']">zhi</span>
                                        <span class="label" :style="{'font-size': '16px', 'background': 'red'}">style</span>
                                        <span class="label" :style="{fontSize: '16px', 'background': 'pink'}">style</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                  </div>
            </div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#mainContent',
            data() {
                return {
                    trimData: '',
                    numberData: 0,
                    lazyData: '',
                    textData: '<span>123</span>',
                    htmlData: '',
                    showData: '',
                    ifData: 0,
                    bindData: ''
                }
            }
        })
    </script>
</body>
</html>